/** @author: duanhaijiao  @date 2022/7/10--18:23 **/

/* name: "xlsx" */
<template>
    <div class="home">
        <div v-html="tableau"></div>
    </div>
</template>

<script>
    import axios from 'axios'
    import XLSX from "xlsx";
    export default {
        data(){
            return {
                tableau: null,
            }
        },
        mounted(){

            // fetch(this.$store.state.baseUrl + '/uploads/20220710/1bac1ca21b82bce50616b81d4d4002c8.xls',{
            //     method:'GET',
            //     headers:{
            //         'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
            //     },
            // }).then(()=>{
            //
            // })
            axios({
                method: 'get',
                responseType: 'blob', // 因为是流文件，所以要指定blob类型
                url: this.$store.state.baseUrl + '/uploads/20220710/1bac1ca21b82bce50616b81d4d4002c8.xls', // 自己的服务器，提供的一个word下载文件接口
            }).then(({ data }) => {
                docx.renderAsync(data, this.$refs.file) // 渲染到页面
            })
            // axios.get(this.$store.state.baseUrl + '/uploads/20220710/1bac1ca21b82bce50616b81d4d4002c8.xls',{
            //     responseType: "arraybuffer", // 设置响应体类型为arraybuffer
            // }).then(({data})=> {
            //     let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析数据
            //     var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
            //     this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
            // })
        }
    }
</script>
